<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Demo for tabular zTree</title>
    <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9;IE=8;"/>
    <link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>
    <link href="./tabular_ztree.css" rel="stylesheet">
    <script src="./tabular_ztree.js"></script>
</head>

<style type="text/css">
    *{
        padding: 0;
        text-decoration: none;
        list-style: none;
    }
    .sider{
        position: absolute;
        top:0;
        left:0;
        width:250px;
        height:100%;
        background-color: #232323;
    }
    .sider ul{
        width:100%;
        margin-top: 50px;
    }
    .sider li{
        padding:10px 50px;
    }
    .sider li.current{
        padding:10px 50px;
        color: #111;
        font-weight: bold;
        background-color: #fff;
    }
    .sider li, .sider li a{        
        color: #fff;
    }
    .sider ul p{
        padding: 20px 10px;
        color: #cdcdcd;
        font-size: 12px;
    }
    .sider ul p a{
        color: #fff;
        font-style: italic;
    }
    .layer{
        width: 600px;
        margin: 50px auto;
        margin-left: 300px;
    }
    pre{
        color: #33CC33;
        font-weight: bold;
        float: left;
        width:250px;
        min-height: 400px;
        padding:10px;
        margin:10px;
        border:1px solid #ccc;
    }
</style>

<body>
    <div class="sider">
        <ul>
            <li class="current">基本样式</li>
            <li><a href="index_switch.html">隐藏图标</a></li>
            <li><a href="index_space.html">边距调整</a></li>
        </ul>
        <ul>
            <p>
                <a href="https://github.com/dothinking/tabular_ztree">tabular zTree</a>是基于<a href="http://www.treejs.cn/v3/main.php#_zTreeInfo">zTree</a>的样式调整，<br>使其呈现树形表格样式。
            </p>
        </ul>
    </div>
    <div class="layer">
        <div id="tree_div"><ul id="tree" class="ztree"></ul></div> 
        <div>
            <pre>
    var zSetting = {
        view: {
            showIcon: true,
            showLine: false
        },
        check: {
            enable: true,
            chkStyle: "checkbox"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
            </pre>
            <pre>
    var tSetting = {
        cols:[{
            key:"", 
            name:"权限节点", 
            width:0.55
        },{
            key:"view", 
            name:"数据", 
            width:0.15
        },{
            key:"document", 
            name:"文档", 
            width:0.15
        },{
            key:"model", 
            name:"模型", 
            width:0.15
        }]
    };
            </pre>
        </div>   
    </div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function(){       

        // ztree配置
        var zSetting = {
            view: {
                showIcon: true,
                showLine: false
            },
            check: {
                enable: true,
                chkStyle: "checkbox"
            },
            data: {
                simpleData: {enable: true}
            }
        };

        // tabular ztree参数
        var tSetting = {
            cols:[{
                key:"", 
                name:"权限节点", 
                width:0.55
            },{
                key:"view", 
                name:"数据", 
                width:0.15
            },{
                key:"document", 
                name:"文档", 
                width:0.15
            },{
                key:"model", 
                name:"模型", 
                width:0.15
            }]
        };

        // 数据源
        var nodes = [
            {"id":"11609","pId":"11607","name":"\u53d1\u52a8\u673a\u975e\u6807\u6d4b\u91cf","action":"view","model":100},
            {"id":"11607","pId":"8","name":"\u975e\u6807\u6d4b\u91cf","action":"view","view":451},
            {"id":"3537","pId":"2780","name":" \u8f66\u8eab\u7cfb\u7edf\u6027\u80fd\u53c2\u6570\u8868","action":"view","model":201},
            {"id":"3530","pId":"2780","name":" DTS\u53c2\u6570\u8868 \t\t\t\t\t","action":"view","view":61},
            {"id":"2780","pId":"8","name":"\u6574\u8f66\u5ba2\u89c2\u6027\u80fd\u53c2\u6570","action":"view","document":154},
            {"id":"8","pId":"0","name":"\u6027\u80fd\u53c2\u6570","action":"view","document":1},
            {"id":"24","pId":"0","name":"\u8f66\u8f86\u62c6\u89e3","action":"view","view":12}
        ];

        // 初始化ztree        
        var treeObj = init_tabular_ztree($("#tree"), zSetting, nodes, tSetting);

        // 展开全部节点
        treeObj.expandAll(true);
    })
</script>
